<script lang="ts" setup>
import { cumputeAvatarColor } from '@/home/utils/avatarColor'

const props = defineProps({
  photo: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  module: {
    type: Array,
    default: () => [],
  },
})
</script>

<template>
  <div>
    <img :data-src="props.photo" :alt="props.title" class="lozad block size-full rounded-4 object-cover" :class="props.module" v-if="props.photo">
    <div class="size-full flex-center rounded-4 text-center text-18 color-hex-ffffff" :class="props.module" :style="{ backgroundColor: cumputeAvatarColor(props.title) }" v-else>
      {{ props.title.slice(0, 1).toUpperCase() }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
